<template>
  <div id='setting' class="systemSet">
    <el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
      <el-tab-pane label="标签设置" key='baseSetting' name="baseSetting">
        <div>
          <div class="filter-container">
            <el-select class="filter-item" style="width: 160px" v-model="listQuery.tagType"
                       :placeholder="$t('table.type')" @change="getTagList">
              <el-option v-for="item in tagTypeOptions" :key="item.value" :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <!--<el-select class="filter-item" style="width: 250px" v-model="listQuery.tagAttr"-->
            <!--:placeholder="$t('table.type')" @change="tagAttrChange">-->
            <!--<el-option v-for="item in tagAttrOptions[listQuery.tagType]" :key="item.key" :label="item.label"-->
            <!--:value="item.key">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="addTag(0)">
              添加标签
            </el-button>
          </div>
          <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
                    style="width: 100%;">
            <el-table-column align="center" label="ID">
              <template slot-scope="scope">
                <span>{{scope.row.id}}</span>
              </template>
            </el-table-column>
            <!--<el-table-column align="center" label="图标">-->
            <!--<template slot-scope="scope">-->
            <!--<img v-if="scope.row.icon" :src="scope.row.icon" width="50"/>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column align="center" label="分类名称">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="添加时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime |parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="排序">
              <template slot-scope="scope">
                <span>{{scope.row.queue}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否起用">
              <template slot-scope="scope">
                <span>{{scope.row.removed > 0 ? '否':'是'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('table.actions')" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="addTag(scope.row)">编辑</el-button>
                <!--<el-button type="danger" size="mini" @click="delTag(scope.row)">删除-->
                <!--</el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="变量设置" key='varSetting' name="varSetting">
        <keep-alive>
          <el-form class="form-container">
            <el-tag>该页面设置为全局变量设置，设置完成马上生效，请谨慎操作！</el-tag>
            <el-form-item style="margin-bottom: 40px;" prop="title" v-for="(item,index) in fields" :key="index">
              <MDinput name="name" v-model="rules[item.key]" required>
                {{item.description}}({{item.type}})
              </MDinput>
            </el-form-item>
            <el-form-item>
              <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitForm">发布
              </el-button>
            </el-form-item>
          </el-form>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="添加或编辑标签" :visible.sync="dialogTableVisible">
      <el-form class="form-container" ref="postForm">
        <el-form-item prop="title">
          <el-upload
            class="avatar-uploader"
            name="userfile"
            :action="uploadAction"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="tagForm.icon" :src="tagForm.icon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            请选择分类图标
          </el-upload>
        </el-form-item>
        <el-form-item prop="name">
          <MDinput ref="select" name="name" v-model="tagForm.name" required :maxlength="100">
            标签名称
          </MDinput>
        </el-form-item>
        <el-form-item style="margin-bottom: 40px;" prop="queue">
          <MDinput name="name" v-model="tagForm.queue" required :maxlength="3" type="number">
            排序
          </MDinput>
        </el-form-item>
        <el-form-item label="是否启用" prop="enable">
          <el-checkbox v-model="tagForm.enable"></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="tagSubmitForm">保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import MDinput from '@/components/MDinput'
  import {getToken} from "@/utils/auth";
  import {globalRuleGet, globalRuleEdit, tagList, tagEdit, tagDel} from '../../api/settings'
  import waves from '@/directive/waves' // 水波纹指令
  import {parseTime} from '@/utils'
  import PanThumb from '@/components/PanThumb'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    name: "setting",
    components: {MDinput, PanThumb},
    directives: {
      waves, elDragDialog
    },
    data() {
      return {
        activeName: 'baseSetting',
        tableKey: 0,
        listQuery: {
          tagType: 'help',
          token: getToken()
        },
        list: [],
        listLoading: false,
        tagTypeOptions: [
          {
            value: 'help',
            label: '帮助类'
          },
          {
            value: 'bank',
            label: '银行类'
          },
        ],
        // tagAttrOptions: {
        //   help: [
        //     {
        //       key: 'helpType',
        //       label: '帮助分类'
        //     }
        //   ],
        //   other: [
        //     {
        //       key: 'otherType',
        //       label: '其他分类'
        //     }
        //   ],
        // },
        createdTimes: 0,
        fields: [],
        rules: {},
        loading: false,
        dialogTableVisible: false,
        tagForm: {
          method: 'tagEdit',
          tagId: 0,
          tagType: '',
          // tagAttr: '',
          name: '',
          icon: '',
          queue: '',
          enable: true
        },
        uploadAction: process.env.BASE_API + "file.upload"
      }
    },
    methods: {
      getTagList() {
        this.listLoading = true;
        tagList(this.listQuery).then(response => {
          this.listLoading = false;
          const json = response.data
          if (json.status) {
            // console.log(json.data);
            this.list = json.data;
          } else {
            this.$message({
              message: json.message,
              type: 'error'
            })
          }
        })
      },
      initData() {
        let params = {
          token: getToken()
        }
        globalRuleGet(params).then(response => {
          const json = response.data
          if (json.status) {
            this.fields = json.data.params;
            this.rules = json.data.rule;
            this.rules.token = getToken();
            for (let key in this.rules) {
              if (typeof(this.rules[key]) === 'object') {
                this.rules[key] = JSON.stringify(this.rules[key]);
              }
            }
          } else {
            this.$message({
              message: json.message,
              type: 'error'
            })
          }
        })
      },
      tagTypeChange(value) {
        this.listQuery.tagType = value;
        console.log(this.listQuery.tagType);
        this.getTagList();
      },
      handleDrag() {
      },
      tagAttrChange(value) {
        this.getTagList();
      },
      // 编辑或添加
      addTag(data) {
        this.dialogTableVisible = true;
        if (data) {
          // console.log(data);
          this.tagForm.tagId = data.id;
          this.tagForm.tagType = data.tagType.value;
          this.tagForm.name = data.name;
          this.tagForm.icon = data.icon;
          this.tagForm.queue = data.queue;
          this.tagForm.enable = data.removed === 0;
          this.tagForm.token = getToken();
        } else {
          this.tagForm = {
            method: 'tagEdit',
            tagId: 0,
            tagType: this.listQuery.tagType,
            name: '',
            icon: '',
            queue: 0,
            enable: true,
            token: getToken()
          }
        }
      },
      tagSubmitForm() {
        this.loading = true;
        tagEdit(this.tagForm).then(response => {
          const json = response.data
          if (json.status) {
            this.$message({
              message: json.message,
              type: json.status ? 'success' : 'error'
            })
            this.loading = false;
            this.dialogTableVisible = false;
            this.getTagList();
          } else this.$message.error(json.message)

        })
      },
      submitForm() {
        this.loading = true;
        this.rules.token = getToken();
        globalRuleEdit(this.rules).then(response => {
          const json = response.data
          if (json.status) {
            this.$message({
              message: '保存成功！',
              type: json.status ? 'success' : 'error'
            });
          } else {
            this.$message({
              message: json.message,
              type: json.status ? 'success' : 'error'
            });
          }
          this.loading = false;
        })
      },
      //m删除标签
      delTag(row) {
        // console.log(row.id);
        tagDel({
          targetId: row.id
        }).then(response => {
          const json = response.data
          if (json.status) {
            this.getTagList();
            this.$message({
              message: json.message,
              type: 'success'
            })

          } else {
            this.$message({
              message: json.message,
              type: 'error'
            })
          }
        })
      },
      handleAvatarSuccess(res) {
        this.tagForm.icon = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!(isJPG || isPNG)) {
          this.$message.error('上传图片只能是 JPG|PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      }
    },
    mounted() {
      this.initData();
      this.getTagList();
    }
  }
</script>

<style lang="scss" scoped>
  .systemSet {
    /*padding: 10px 15px;*/
    margin: 30px 35px;
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }

    .avatar {
      width: 80px;
      height: 80px;
      display: block;
    }
  }
</style>
